<template>
	<!-- 俄罗斯方块 -->
	<view class="tetris flexColumn">
		<view class="tetris-box">
			<!-- 左边游戏区 -->
			<view class="tetris-left">
				<view class="tetris-left-map">
					<view class="tetris-map-table">
						<view class="tetris-map-tr" v-for="(item1, index1) in map_list" :key="index1">
							<view class="tetris-map-td flexCenter u-rela" v-for="(item2, index2) in item1" :key="index2">
								<view class="tetris-block" v-show="item2 == 1 || item2 == 2"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 右边展示区 -->
			<view class="tetris-right u-font-26">
				<view class="tetris-right-item flexColumn flexItems">
					<view class="c404040 fontBold">开始游戏</view>
					<view class="tetris-number flexCenter u-font-32 u-m-t-10 c404040 fontFamilyBold" @click="bindGameStart">Start</view>
				</view>
				<!-- 开始暂停 -->
				<view class="tetris-right-item flexColumn flexItems">
					<view class="c404040 fontBold">暂停/继续</view>
					<view class="tetris-SP flexCenter u-m-t-10" @click.stop="bindPause">
						 <u-icon :name="is_pause || is_end?'play-right-fill':'pause'" size="40" color="#404040"></u-icon>
					</view>
				</view>
				<!-- 得分 -->
				<view class="tetris-right-item flexColumn flexItems">
					<view class="c404040 fontBold">得分</view>
					<view class="tetris-number flexCenter u-font-32 u-m-t-10 c404040 fontFamilyBold">{{number}}</view>
				</view>
				<!-- 下一个 -->
				<view class="tetris-right-item flexColumn flexItems">
					<view class="c404040 fontBold">下一个</view>
					<view class="tetris-next u-m-t-10">
						<view class="tetris-next-box">
							<view class="tetris-next-box-table">
								<view class="tetris-next-box-tr flex" v-for="(x1, y1) in nextList" :key="y1">
									<view class="tetris-next-box-td" v-for="(x2, y2) in x1" :key="y2">
										<view class="tetris-block" v-show="x2 == 1"></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 操作区 -->
		<view class="tetris-handle flex1 flexBetween">
			<view class="tetris-handle-left flex1 u-rela">
				<button class="tetris-handle-btn tetris-handle-btn-small tetris-handle-btn-up" @click="controlBlock('up')">
					<u-icon name="arrow-up" size="40" color="#404040"></u-icon>
				</button>
				<button class="tetris-handle-btn tetris-handle-btn-small tetris-handle-btn-right" @click="controlBlock('right')">
					<u-icon name="arrow-right" size="40" color="#404040"></u-icon>
				</button>
				<button class="tetris-handle-btn tetris-handle-btn-small tetris-handle-btn-down" @click="controlBlock('down')">
					<u-icon name="arrow-down" size="40" color="#404040"></u-icon>
				</button>
				<button class="tetris-handle-btn tetris-handle-btn-small tetris-handle-btn-left" @click="controlBlock('left')">
					<u-icon name="arrow-left" size="40" color="#404040"></u-icon>
				</button>
			</view>
			<!-- <view class="tetris-handle-right flex1 flexCenter">
				<button class="tetris-handle-btn tetris-handle-btn-big" @click="Transformers">
					<u-icon name="reload" size="50" color="#404040"></u-icon>
				</button>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is_start: false,	// 是否开始  true开始  false没开始
				is_pause: true,		// 暂停/继续  true暂停 false继续
				is_end: false,		// 是否结束 true结束 false未结束
				number: 0,			// 分数
				map_row: 20,		// 行
				map_col: 10,		// 列
				map_list: [],		// 栅格
				shapeList:[
					[{x:0,y:0},{x:1,y:0},{x:2,y:0},{x:3,y:0}],	// 1字形
					[{x:0,y:0},{x:0,y:1},{x:1,y:0},{x:1,y:1}],	// 田字形
					[{x:0,y:1},{x:1,y:0},{x:1,y:1},{x:1,y:2}],	// ⊥字形
					[{x:0,y:0},{x:0,y:1},{x:1,y:1},{x:1,y:2}],	// Z字形
					[{x:0,y:1},{x:0,y:2},{x:1,y:0},{x:1,y:1}],	// 倒Z形
					[{x:0,y:0},{x:0,y:1},{x:1,y:1},{x:2,y:1}],	// 7字形
					[{x:0,y:0},{x:0,y:1},{x:1,y:0},{x:2,y:0}],	// 倒7形
				],
				shape: [],			// 随机下落的方块
				timer: null,		// 下落计时器
				speed: 500,	    	// 下落的速度
				nextList: [],		// 下一个网格
				next: [],			// 下一个
			};
		},
		onLoad() {
			this.init();
			this.blockCreate();
		},
		onUnload() {
			clearInterval(this.timer);
		},
		methods:{
			// 开始游戏
			bindGameStart(){
				if(this.is_start){
					uni.showToast({title:'游戏进行中！',icon:'none'});
					return;
				}
				if(this.is_end){
					uni.showToast({title:'游戏已结束！',icon:'none'});
					return;
				}
				this.is_start = true;
				this.is_pause = false;
				this.blockRender();
				this.blockMove();
			},
			// 暂停继续
			bindPause(){
				if(this.getGamesStatus()){
					return;
				}
				this.is_pause = !this.is_pause;
				this.is_pause ? clearInterval(this.timer) : this.blockMove();
			},
			// 游戏当前状态
			getGamesStatus(){
				if(this.is_end){
					uni.showToast({title:'游戏已结束！',icon:'none'});
					return true;
				}
				if(!this.is_start){
					uni.showToast({title:'游戏未开始！',icon:'none'});
					return true;
				}
			},
			// 游戏是否结束
			die(){
				let bool = false;    // false表示没结束
				for(let i = 0; i < this.map_col; i++){
					if(this.map_list[0][i] == 2){
						clearInterval(this.timer);
						this.is_end = true;
						this.is_start = false;
						this.is_pause = true;
						uni.showModal({title: "提示", content: "游戏结束!", showCancel: false,});
						break;
					}
				}
				return bool;
			},
			// 初始化
			init(){
				// 游戏格局  0=没有方块  1=移动中的方块  2=到底的方块
				for(let i = 0; i < this.map_row; i++){
					this.map_list[i] = [];
					for(let j = 0; j < this.map_col; j++){
						this.map_list[i][j] = 0;
					}
				}
				// 下一个方块格局
				for(let i = 0; i < 4; i++){
					this.nextList[i] = [];
					for(let j = 0; j < 3; j++){
						this.nextList[i][j] = 0;
					}
				}
			},
			// 方块生成
			blockCreate(){
				let random = Math.floor(Math.random() * 7);
				// 这里需要深拷贝，不然会影响shapeList数组内的数据
				this.shape = this.$u.deepClone(this.shapeList[random]);
			},
			// 方块渲染
			blockRender(){ 
				this.shape.forEach(item => {
					if(this.map_list[item.x][item.y] == 0){
						this.map_list[item.x][item.y] = 1;
					}
				})
			},
			// 方块下落
			blockMove(){
				this.timer = setInterval(()=>{
					// 每次移动前都要判断是否到底或者碰到底部方块
					if(this.blockToBottom()){
						this.shape.forEach(item => {
							this.map_list[item.x][item.y] = 2;
						})
						// 当方块落底之后，先判断是否游戏结束，再重新生成新的方块
						if(!this.die()){
							this.blockCreate();
						}
					}else{
						// 方块下落，在++之前，需要先清空方块的上一个位置的值
						this.shape.forEach(item => {
							this.map_list[item.x][item.y] = 0;
							item.x++;
						})
					}
					this.blockRender();
					this.$forceUpdate();
				}, this.speed);
			}, 
			
			// 控制方向
			controlBlock(keyboard){
				this.getGamesStatus();
				switch(keyboard){
					case 'up':
						this.Transformers()
						break;
					case 'down':
						console.log('down');
						break;
					case 'left':
						if(!this.blockToLeft()){
							this.shape.forEach(item => {
								this.map_list[item.x][item.y] = 0;
								item.y--;
							})
						}
						break;
					case 'right':
						if(!this.blockToRight()){
							this.shape.forEach(item => {
								this.map_list[item.x][item.y] = 0;
								item.y++;
							})
						}
						break;
					default:
						break;
				}
			},
			// 方块旋转
			Transformers(){
				
			},
			// 方块到底	1:横坐标不能大于map_row-1  2:如果某个方块下面的方块=2 则说明有其他的方块
			blockToBottom(){
				let bool = false;
				this.shape.forEach(item=>{
					if(item.x == this.map_row-1 || this.map_list[item.x+1][item.y] == 2){
						bool = true;
					}
				})
				return bool;
			},
			// 方块到左
			blockToLeft(){
				let bool = false;
				this.shape.forEach(item=>{
					if(item.y <= 0 || this.map_list[item.x][item.y-1] == 2){
						bool = true;
					}
				})
				return bool;
			},
			// 方块到右
			blockToRight(){
				let bool = false;
				this.shape.forEach(item=>{
					if(item.y >= this.map_col-1 || this.map_list[item.x][item.y+1] == 2){
						bool = true;
					}
				})
				return bool;
			},
		}
	}
</script>

<style>
	page{background-color: #8B966E;}
</style>
<style lang="scss" scoped>
// 背景 #8B966E  文本及方块 #404040  网格背景 #C5D0A5
$tetris-bg-color: #8B966E;
$tetris-grid-bg-color: #C5D0A5;
$tetris-line-color: rgba(139,150,110,.3);
$tetris-text-color: #404040;
.c404040{color: #404040;}
.tetris{width: 100%;height: calc(100vh - 44px);}
.tetris-box{
	width: 100%;display: flex;justify-content: space-between;padding: 30rpx;
	.tetris-left{
		.tetris-left-map{padding: 20rpx;background-color: $tetris-grid-bg-color;border-radius: 10rpx;}
		.tetris-map-table{border-top: 2rpx solid $tetris-line-color;border-left: 2rpx solid $tetris-line-color;}
		.tetris-map-tr{display: flex;}
		.tetris-map-td{width: 50rpx; height: 50rpx;padding: 0; border-right: 2rpx solid $tetris-line-color;border-bottom: 2rpx solid $tetris-line-color;}
	}
	.tetris-right{
		.tetris-right-item{margin-bottom: 40rpx;}
		.tetris-SP{
			width: 100rpx;height: 100rpx;position: relative;background-color: $tetris-grid-bg-color;border-radius: 10rpx;
			&::before{content: "";position: absolute;width: 80%;height: 80%;border: 4rpx solid $tetris-bg-color;top: 10%;left: 10%;transform: translate(-5%,-5%);border-radius: 10rpx;}
		}
		.tetris-next{
			width: 100rpx;height: auto;background-color: $tetris-grid-bg-color;
			padding: 10rpx;border-radius: 10rpx;
			.tetris-next-box-table{border-left: 2rpx solid $tetris-line-color;border-top: 2rpx solid $tetris-line-color;}
			.tetris-next-box-td{flex: 1;height: 26rpx;border-right: 2rpx solid $tetris-line-color;border-bottom: 2rpx solid $tetris-line-color;}
		}
		.tetris-number{width: 100%;padding: 10rpx;background-color: $tetris-grid-bg-color;border-radius: 10rpx;}
	}
	.tetris-block{width: 95%;height: 95%;background-color: $tetris-text-color;}
}
.tetris-handle{
	.tetris-handle-left,.tetris-handle-right{height: 100%;}
	.tetris-handle-btn{
		display: flex;align-items: center;justify-content: center;background-color: $tetris-grid-bg-color;border-radius: 100rpx;
		border: 0 !important;
	}
	/deep/.u-hairline-border:after{border: 0 !important;}
	.tetris-handle-btn-small{
		width: 120rpx;height: 120rpx;position: absolute;
		&.tetris-handle-btn-up{top: 50rpx;left: 50%;transform: translateX(-50%);}
		&.tetris-handle-btn-right{right: 30rpx;top: 50%;transform: translateY(-50%);}
		&.tetris-handle-btn-down{bottom: 50rpx;left: 50%;transform: translateX(-50%);}
		&.tetris-handle-btn-left{left: 30rpx;top: 50%;transform: translateY(-50%);}
	}
	.tetris-handle-btn-big{width: 200rpx;height: 200rpx;color: $tetris-text-color;}
}
</style>
